How to setup eslint for react typescript projects

#How to setup eslint for react typescript projects| 来源: 网络整理| 查看: 265

In this article, i am going to show you how i set up basic linting with eslint for react typescript projects.

There are many articles online regarding setting up eslint for react. It was a real mess and difficult to figure out which settings to use and what packages to install. After sieving through countless articles and resources, i have finally found a setup which covers all the basics in a react project.

I normally use npx create-react-app [projectname] --template typescript to start my react project with typescript template. This template installs eslint for you.

However, if you do not, you will need to install the eslint and typescript package. npm install eslint typescript

I would recommend installing and setting up eslint for every project instead of using your own global eslint package/settings. Each project might have different requirements. Your .eslintrc file will be configured to the required linting for each of your projects. It ensures consistency in code for all developers working on the project.

First, in your react project, create a .eslintrc.json file in the root directory.

Next, in the json file, use the following set up. For more details on configuring eslint, you can find out more from the eslint website

{ "env": { "browser": true, "es6": true, "jest": true }, "rules": { "no-console": "error", "import/first": "error", "react/prop-types": "off" }, "extends": [ "react-app", "react-app/jest", "eslint:recommended", "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:react-hooks/recommended", "prettier" ], "parser": "@typescript-eslint/parser", "root": true, "plugins": ["react", "@typescript-eslint"], "parserOptions": { "ecmaVersion": 11, "ecmaFeatures": { "jsx": true }, "project": "./tsconfig.json" }, "settings": { "react": { "pragma": "React", "version": "detect" } } } Enter fullscreen mode Exit fullscreen mode

So what are the configurations being set?

env

Enables the use of global env variables in your code. Enabling the env variables will prevent eslint from giving errors.

rules

Configure/enable/disable specific rules from the plugins and configs

extends

Extends configuration files from npm packages.

react-app - Eslint configuration used by create-react-app react-app/jest - Eslint configuration used by create-react-app eslint:recommended - Eslint recommended configuration by eslint plugin:react/recommended - Recommended react linting configs details

plugin:@typescript-eslint/recommended - Turns on rules from TypeScript-specific plugin. npm install --save-dev @typescript-eslint/eslint-plugin details

plugin:react-hooks/recommended - Eslint configuration for react-hooks by create-react-app details. Comes installed together with npx create-react-app

prettier - Turns off all rules that are unnecessary or might conflict with Prettier. You will need to install this package for you to use it. npm install --save-dev eslint-config-prettier details

plugins

Plugins from npm packages which configures and rules

react - For eslint-plugin-react @typescript-eslint - For parser and extension @typescript-eslint/recommended parser Use @typescript-eslint/parser for typescript to work with eslint. This allows Eslint to understand TypeScript syntax. Install typescript-eslint npm install --save-dev @typescript-eslint/parser details parserOptions ecmaVersions - sets the ECMAScript version you want to support for your project ecmaFeatures - set jsx to true for React project - Tells Eslint where to find the root tsconfig file of your project. If you have multiple tsconfigs in the project, you can define where the tsconfigs are found. details settings

The settings made here will be shared across all rules for plugins. For eslint-plugin-react, it will require some defaults setttings:

pragma: "React" - defaults to React version: "detect" - auto detects the version of React eslint eslint-plugin-react

Remember to install vscode extension Eslint and Prettier in order for linting and styling to work. With this configuration, you are all set to write in typescript for any React projects.

You can add or remove plugins/configs which you find more suitable for your style. Enable rules like "no-console" which will give an error when compiling. Good coding practice for preventing unwanted console logs in your app. Or "import/first" where all import modules must come first at the top of the file. Catches any import errors during compilation.

Hope this article was useful for you. Leave a comment, like or share if you found it useful. 😄

【本文地址】

公司简介

联系我们